<template>
<!-- 用到了 -->

    <!-- 问卷编辑页面 -->
    <div style="padding: 10px">
        <h1>{{stitle}}</h1>

        <div id="survey-form">
            <!-- 动态表单 -->
            <el-form :inline="true" label-width="80px" id="surveyForm" ref="surveyForm" :rules="surveyRule" :model="surveyForm">
                <div v-if="surveyForm.question.length===0">
                            <h2>该问卷暂无问题</h2>
                        </div>
                <div v-for="(item,index) in surveyForm.question" :key="index" class="surveyform-div">
                    <!-- 单选题 -->
                    <el-card v-if="item.type === '1'||item.type === 1" class="surveyform-card">
                        <el-form-item  label="题号" :prop="'question.'+index+''">
                            <el-row  style="width:500px;"  :gutter="10">
                                <el-col :span="18" style="width:350px;">
                                    <!-- {{item.qid}} -->
                                    <el-input type="textarea" v-model="item.order" placeholder="请输入问题题号" ></el-input>                                    
                                </el-col>
                            </el-row>                            
                        </el-form-item>
                        <el-form-item  label="问题id" :prop="'question.'+index+'.id'">
                            <el-row  style="width:500px;"  :gutter="10">
                                <el-col :span="18" style="width:350px;">
                                    <!-- {{item.qid}} -->
                                    <el-input type="textarea" v-model="item.id" placeholder="请输入问题id" readonly></el-input>                                    
                                </el-col>
                            </el-row>                            
                        </el-form-item>
                        <!-- <el-form-item  label="是否必填" :prop="'question.'+index+''">
                            <el-row  style="width:500px;"  :gutter="10">
                                <el-col :span="18" style="width:350px;">
                                    <el-input type="textarea" v-model="item.required" placeholder="请输入问题是否必填" readonly></el-input>                                    
                                </el-col>
                            </el-row>                            
                        </el-form-item> -->

                        <el-form-item label="是否必填">
                        <el-select v-model="item.required" placeholder="请选择是否必填" >
                            <el-option
                                v-for="item in StatusList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                            </el-select>
                        </el-form-item>

                        <!-- 问题输入框 --> 
                        <el-form-item  label="问题内容" :prop="'question.'+index+'.questionName'">
                            <el-row  style="width:500px;"  :gutter="10">
                                <el-col :span="18" style="width:350px;">
                                    <!-- {{item.qid}} -->
                                    <el-input type="textarea" v-model="item.questionName" placeholder="请输入问题内容"></el-input>                                    
                                </el-col>
                                <el-col :span="4" style="color:#E6A23C;">[单选题]</el-col>
                                <el-col :span="2">
                                    <el-button  @click="deleteQuestion(index,item)" >删除问题</el-button>
                                    <el-button  @click="updateQuestion(index,item)" >修改问题</el-button>
                                </el-col>
                            </el-row>                            
                        </el-form-item>
                        <!-- 选项输入框 -->
                        <!-- <el-form-item v-for="(op,i) in item.optionData" :key="i">
                            <el-input type="text"  v-model="op.optionName[i].id" ></el-input>
                        </el-form-item> -->
                        <el-form-item v-for="(op,i) in item.optionData"  :key="i" :label="'选项'+(i+1)" :prop="'question.'+index+'.optionData.'+i+'.optionName'">
                            <el-row :gutter="20">
                                <el-col :span="20" style="width:300px;">
                                    <!-- {{op.oid}} {{op.qid}} -->
                                    <el-input type="text"  v-model="op.optionName" placeholder="请输入选项内容"></el-input>
                                    <!-- <el-input type="text"  v-model="op.id" placeholder="请输入选项内容"></el-input> -->
                                </el-col>
                                <el-col :span="4" style="width:50px" >
                                    <!-- v-else-if="i>1" -->
                                    <!-- <el-button size="mini" type="danger" icon="el-icon-minus" @click="deleteOption(item.optionData,i,op)" circle></el-button> -->
                                      <el-button @click="deleteOption(item.optionData,i,op)" >删除选项</el-button>
                                     <el-button  @click="updateOption(item.optionData,i,op,index)" >保存选项内容</el-button>
                                     <el-button  @click="updateOption1(index,item.id,item.optionData,i,op)" >新增选项</el-button>
                                </el-col>
                                <!-- v-if="i===item.optionData.length-1" -->
                                <el-col :span="4" style="width:50px" v-if="i===item.optionData.length-1">
                                    <el-button style="display: inline-block;" size="mini" @click="addOption(item.optionData)" type="primary" icon="el-icon-plus" circle></el-button>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-card>

                    <!-- 多选题 -->
                    <el-card v-if="item.type === '2'||item.type === 2" class="surveyform-card">
                         <el-form-item  label="题号" :prop="'question.'+index+''">
                            <el-row  style="width:500px;"  :gutter="10">
                                <el-col :span="18" style="width:350px;">
                                    <!-- {{item.qid}} -->
                                    <el-input type="textarea" v-model="item.order" placeholder="请输入问题题号" readonly></el-input>                                    
                                </el-col>
                            </el-row>                            
                        </el-form-item>
                        <el-form-item  label="问题id" :prop="'question.'+index+'.id'">
                            <el-row  style="width:500px;"  :gutter="10">
                                <el-col :span="18" style="width:350px;">
                                    <!-- {{item.qid}} -->
                                    <el-input type="textarea" v-model="item.id" placeholder="请输入问题id" readonly></el-input>                                    
                                </el-col>
                            </el-row>                            
                        </el-form-item>
                        <!-- <el-form-item  label="是否必填" :prop="'question.'+index+''">
                            <el-row  style="width:500px;"  :gutter="10">
                                <el-col :span="18" style="width:350px;">
                                    <el-input type="textarea" v-model="item.required" placeholder="请输入问题是否必填" readonly></el-input>                                    
                                </el-col>
                            </el-row>                            
                        </el-form-item> -->

                        <el-form-item label="是否必填">
                        <el-select v-model="item.required" placeholder="请选择是否必填" >
                            <el-option
                                v-for="item in StatusList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                            </el-select>
                        </el-form-item>
                        <!-- 问题输入框 --> 
                        <el-form-item  label="问题内容" :prop="'question.'+index+'.questionName'">
                            <el-row  style="width:500px;"  :gutter="10">
                                <el-col :span="18" style="width:350px;">
                                    <!-- {{item.qid}} -->
                                    <el-input type="textarea" v-model="item.questionName" placeholder="请输入问题内容"></el-input>                                    
                                </el-col>
                                <el-col :span="4" style="color:#E6A23C;">[多选题]</el-col>
                                <el-col :span="2">
                                    <!-- <el-button size="mini" @click="deleteQuestion(index,item)" type="info" icon="el-icon-delete" circle></el-button> -->
                                     <el-button  @click="deleteQuestion(index,item)" >删除问题</el-button>
                                    <el-button  @click="deleteQuestion(index,item)" >修改问题</el-button>
                                </el-col>
                            </el-row>                            
                        </el-form-item>
                        <!-- 选项输入框 -->
                        <el-form-item v-for="(op,i) in item.optionData" :key="i" :label="'选项'+(i+1)" :prop="'question.'+index+'.optionData.'+i+'.optionName'">
                            <el-row :gutter="20">
                                <el-col :span="20" style="width:300px;">
                                    <!-- {{op.oid}} {{op.qid}} -->
                                    <el-input type="text"  v-model="op.optionName" placeholder="请输入选项内容"></el-input>
                                </el-col>
                                <el-col :span="4" style="width:50px" >
                                    <!-- v-else-if="i>1" -->
                                    <!-- <el-button size="mini" type="danger" icon="el-icon-minus" @click="deleteOption(item.optionData,i,op)" circle></el-button> -->
                                    <el-button @click="deleteOption(item.optionData,i,op,item)" >删除问题选项</el-button>
                                     <el-button  @click="deleteQuestion(index,item)" >保存问题选项内容</el-button>
                                </el-col>
                                <el-col :span="4" style="width:50px" v-if="i===item.optionData.length-1">
                                    <el-button style="display: inline-block;" size="mini" @click="addOption(item.optionData)" type="primary" icon="el-icon-plus" circle></el-button>
                                    <!-- <el-button style="display: inline-block;" size="mini" @click="updateOption(item.options)" type="primary" icon="el-icon-plus" circle></el-button> -->
                                </el-col>
                            </el-row>
                        </el-form-item>
                        
                    </el-card>

                    <!-- 简答题 -->
                    <el-card v-if="item.type === '3'||item.type === 3" class="surveyform-card">
                         <el-form-item  label="题号" :prop="'question.'+index+''">
                            <el-row  style="width:500px;"  :gutter="10">
                                <el-col :span="18" style="width:350px;">
                                    <!-- {{item.qid}} -->
                                    <el-input type="textarea" v-model="item.order" placeholder="请输入问题题号" readonly></el-input>                                    
                                </el-col>
                            </el-row>                            
                        </el-form-item>
                        <el-form-item  label="问题id" :prop="'question.'+index+'.id'">
                            <el-row  style="width:500px;"  :gutter="10">
                                <el-col :span="18" style="width:350px;">
                                    <!-- {{item.qid}} -->
                                    <el-input type="textarea" v-model="item.id" placeholder="请输入问题id" readonly></el-input>                                    
                                </el-col>
                            </el-row>                            
                        </el-form-item>
                        <!-- <el-form-item  label="是否必填" :prop="'question.'+index+''">
                            <el-row  style="width:500px;"  :gutter="10">
                                <el-col :span="18" style="width:350px;">
                                    <el-input type="textarea" v-model="item.required" placeholder="请输入问题是否必填" readonly></el-input>                                    
                                </el-col>
                            </el-row>                            
                        </el-form-item> -->

                        <el-form-item label="是否必填">
                        <el-select v-model="item.required" placeholder="请选择是否必填" >
                            <el-option
                                v-for="item in StatusList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                            </el-select>
                        </el-form-item>
                        <!-- 问题输入框 --> 
                        <el-form-item  label="问题内容" :prop="'question.'+index+'.questionName'">
                            <el-row  style="width:500px;"  :gutter="10">
                                <el-col :span="18" style="width:350px;">
                                    <!-- {{item.qid}} -->
                                    <el-input type="textarea" v-model="item.questionName" placeholder="请输入问题内容"></el-input>                                    
                                </el-col>
                                <el-col :span="4" style="color:#E6A23C;">[简答题]</el-col>
                                <el-col :span="2">
                                    <!-- <el-button size="mini" @click="deleteQuestion(index,item)" type="info" icon="el-icon-delete" circle></el-button> -->
                                    <el-button  @click="deleteQuestion(index,item)" >删除问题</el-button>
                                    <el-button  @click="deleteQuestion(index,item)" >修改问题</el-button>
                                </el-col>
                            </el-row>                            
                        </el-form-item>

                    </el-card>
                </div>
            </el-form>

          

        </div>                
           
    </div>
</template>

<script>
import axios from 'axios';

export default {
    data() {
        var checkStitle = (rule, value, callback) => {
            if (value === '') {
                return callback(new Error('问卷标题不能为空'));
            }else{
                callback();
            }
        };
        var checkQtitle = (rule, value, callback) => {
            if (value === '') {
                return callback(new Error('问题内容不能为空'));
            }else{
                callback();
            }
        };
        var checkOption = (rule, value, callback) => {
            if (value === '') {
                return callback(new Error('选项内容不能为空'));
            }else{
                callback();
            }
        };
        return {
            uid: this.$route.query.id,
            sid: this.$route.query.id,
            stitle: '',
            StatusList: [
            {
                label: '是',
                value: 1
                },
                {
                label: '否',
                value: 2
            }
            ],
            editStitleShow: false,
            editPublishShow: false,

            stitleForm:{
                questionTitle: ''
            },
            stitleRule:{
                questionTitle:[{required: true, validator: checkStitle, trigger: 'blur' }]
            }, 

            surveyForm: {
                question: [],
                delQues:[],//记录删除的问题编号列表
                delOps:[]//记录删除的选项编号列表
            },
            surveyRule:{
                question: []
            }                
        }
    },
    methods: {

        // 加载问卷标题
        // 加载问题列表 已完成
        loadQuesList(sid){
            const _this=this
            axios({
                // url:"http://uchiha.vip:5000/questionnaireContent/?questionnaireId="+this.$route.query.id
                url:"/questionnaireContent/?questionnaireId="+this.$route.query.id
            }).then(function(resp){
                //console.log(resp)
                if (resp.data.msg==='上传成功') {
                    _this.surveyForm.question=resp.data.data;
                     console.log(_this.surveyForm.question)
                }
            })
           },

        // 增加问题选项 已完成
        addOption(options){
            options.push({
                option: ''
            });            
        },

        // 删除问题选项  已完成
        deleteOption(options,i,op){
            const _this=this
            //先判断选项数量
            if (options.length>2) {
                //判断该选项是否有编号，有则在delOps[]中记录
                if (op.oid!=undefined) {
                    // console.log(op.oid)
                    _this.surveyForm.delOps.push(op.oid);
                }
                options.splice(i,1);//在选项数组中移除
            }else{
                _this.$message({
                    type:'warning',
                    message:'选择题必须至少有两个选项哦！'
                });
            }

            axios({
                // url:'http://uchiha.vip:5000/options/?id='+op.id,
                url:'/options/?id='+op.id,
                method:"delete"
            }).then(function(resp){
                    _this.$message({
                         type: "success",
                        message: "删除问题选项成功"
                    })
            })
        },

        //保存选项 已完成
        updateOption(options,i,op,index){
          //  console.log(i)
            //console.log(id)
           // console.log(op)
           const _this=this
           console.log(i)
           console.log(op.id)
           console.log(op.optionName)
          
          // console.log(op.id)
           //const idindex=this.surveyForm.delOps.push(op.oid)
           //console.log(idindex)

        //    const ooid=JSON.parse(JSON.stringify(op[idindex-1].id))
        //    const oname=JSON.parse(JSON.stringify(op[idindex-1].optionName))
        //    console.log(JSON.parse(JSON.stringify(op[idindex-1].optionName)))
        //    console.log(JSON.parse(JSON.stringify(op[idindex-1].id)))
         
                const data={"optionName":op.optionName};
                  axios({
                        // url:'http://uchiha.vip:5000/options/?id='+op.id,
                        url:'/options/?id='+op.id,
                        method:"put",
                        data:data,
                  }).then(function(resp){
                      console.log(resp)
                      _this.$message({
                         type: "success",
                        message: "修改选项成功"
                    })
                 })
                 return;
           
        },
        //保存新增 1 已完成
        updateOption1(options,i,op){
            //JSON.parse(JSON.stringify(store.getters.menuList))
            const _this=this
            console.log(JSON.parse(JSON.stringify(op[op.length-1].optionName)))
            //console.log(options+'55'+i+'000'+op.optionData[optionData.length-1].optionName)
            
                 const data={"optionName":JSON.parse(JSON.stringify(op[op.length-1].optionName)),"questionId":i,"count":0}
                axios({
                        // url:'http://uchiha.vip:5000/options/',
                        url:'/options/',
                        method:"post",
                        data:data,
                  }).then(function(resp){
                      console.log(resp)
                    _this.$message({
                         type: "success",
                        message: "新增选项成功"
                    })
                 })
        },

        // 删除该问题 1已完成
        deleteQuestion(index,item){
            //判断该问题是否有编号，有则在delQues[]中记录
            if (item.qid!=undefined) {
                // console.log({qid:item.qid,qtype:item.qtype})
                this.surveyForm.delQues.push({id:item.id,type:item.type});                
            }
            this.surveyForm.question.splice(index,1);//在问题数组中移除
            const _this=this
             axios({
                        // url:'http://uchiha.vip:5000/question/?id='+item.id,
                        url:'/question/?id='+item.id,
                        method:"delete",
                  }).then(function(resp){
                      console.log(resp)
                       _this.$message({
                         type: "success",
                        message: "修改成功"
                    })
            })
        },
        //修改问题 已完成
        updateQuestion(index,item){
            const _this=this
            const data={"order":item.order,"questionName":item.questionName}
             axios({
                        // url:'http://uchiha.vip:5000/question/?id='+item.id,
                        url:'/question/?id='+item.id,

                        method:"put",
                        data:data
                  }).then(function(resp){
                      console.log(resp)
                        _this.$message({
                         type: "success",
                        message: "修改成功"
                    })
            })
        },
        // 问卷标题 已完成
        getTitle(){
            const _this=this
            axios({
                // url:'http://uchiha.vip:5000/questionnaire/?id='+this.$route.query.id
                url:'/questionnaire/?id='+this.$route.query.id
            }).then(function(resp){
                _this.stitle=resp.data.data[0].questionTitle
            })
        }

       
    },
    mounted(){
        this.loadQuesList(this.sid);//加载该问卷的问题列表
        this.getTitle()
    }
}
</script>

